<template>
    <view class="screen_lists">
        <u-loading-page :loading="loading > 0" loading-text="正在上传中..." class="u_loading_page"></u-loading-page>
        <view class="screen_list">
            <view class="screen_list_item" v-for="(item, index) in processList" :key="index">
                <image :src="'../../static/images/fileManage/' + getImage(item.fileFormat)"></image>
                <view class="screen_name_info">
                    <view class="name">{{item.fileName}}</view>
                    <view class="info">
                        <text>{{ item.uploadTime }}</text>
                        <text>{{ item.fileSize }}</text>
                        <text class="again" v-if="item.uploadStatus === 1">重名文件</text>
                    </view>
                </view>
                <view class="screen_again_more">
                    <!--                    <uni-icons type="more-filled" size="20" @click="moreFn(item, index)" class="uni_icons"></uni-icons>-->
                    <view :tabindex="index"
                           @click="handleFocus(index)"  @focus="handleFocus(index)" @blur="handleBlur(index)" class="handleInput"
                           :class="index === operationIndex?'active':''"></view>
                    <!-- <u-icon  name="more-dot-fill" color="#C5C5C5" size="28"></u-icon> -->
                    <view class="operation" ref="operation" v-if="index == operationIndex">
                        <!-- <view>更新</view> -->
                        <view @click="del(item, index)" class="operation_btn">删除</view>
                        <!-- <view>提交/撤回</view>
                        <view>文件信息</view> -->
                    </view>
                </view>
            </view>
        </view>
         <!-- <u-button class="uploadBtn" type="primary" @click="uploadFn"> + </u-button> -->
         <view style="color: red;margin-bottom: 8rpx;font-size:34rpx;">禁止上传、存储涉密文件</view>
         <uploadView ref="uploadViewRef"
                    :btn_title="'+'" :btn_style="{
                        background: '#ffffff',
                        color: '#272636',
                        fontWeight: 600,
                        height: '80rpx',
                        width: '100%',
                        fontFamily: 'Poppins',
                        borderRadius: '16rpx',
                        fontSize: '48rpx',
                        border: '2rpx solid rgba(0,0,0,.2)'
                    }"
                    :upload_url="upload_url"
                    :fileType="uploadForm.fileType"
                    :profession="uploadForm.profession"
                    :upload_name="'files'"
                    :formats="formats.toString()"
                    :size="size"
                    :count="9999"
                    @handleLoading="isLoading => handleLoading(isLoading)"
                    @getFiles="getFiles"
                    @progress="handleProgress"></uploadView>
        <view class="bottom">
            <u-button :text="`上传至:${majorTypeName}/${fileTypeName}`" ></u-button>
            <u-button type='primary' text="导入" @click="importFn"></u-button>
        </view>

        <!-- 进度条组件 -->
        <div v-if="isLoading" class="progress-mask">
            <div class="progress-content">
                <!-- 圆形进度条 -->
                <div class="circle-progress-container">
                    <div class="circle-progress">
                        <div class="progress-inner">
                            <uni-icons type="spinner" size="40" color="#007AFF" class="loading-icon"></uni-icons>
                            <div class="progress-text">{{ progress }}%</div>
                        </div>
                    </div>
                </div>
                <!-- 上传信息 -->
                <div class="upload-info">
                    <div class="upload-text">正在上传中...</div>
                    <div class="file-name">{{ currentFileName || '准备上传文件' }}</div>
                </div>
            </div>
        </div>
        
    </view>
</template>

<script>
	import config from '@/config'
    import Style from '../../uni_modules/uview-ui/libs/mixin/style'
    import uploadView from '../uploadView'
	export default{
        components: {Style,uploadView},
        data(){
			return{
					operationIndex:-1,
					processList: [],
					fileTypeName: '',
					majorTypeName: '',
					token: '',
					uploadForm:{},
                    timeNumber: 3000,
                    loading: 0,
					formats: [],
					size: 1024,
					upload_url: config.baseUrl + '/knowledgeFile/file/upload',
                    isLoading: false,
                    progress: 0,
                    currentFileName: ''
				}
		},
		onLoad: function (option) {
			this.uploadForm = JSON.parse(decodeURIComponent(option.uploadForm))
			this.fileTypeName = uni.getStorageSync('fileType').find( item => item.id == this.uploadForm.fileType).name 
			this.majorTypeName = uni.getStorageSync('majorType').find( item => item.id == this.uploadForm.profession).name
			this.token = uni.getStorageSync('token')
			console.log(this.token, 'this.token',this.fileType,this.profession)
			// this.uploadFn()
			 this.size = 1 * 1024 // 1 GB
			            if([31,32,34].includes(this.uploadForm.fileType)){
			                this.formats = ['.doc','.docx','.pdf']
			            }
			            if([33].includes(this.uploadForm.fileType)){
			                this.formats = ['.doc','.docx',]
			            }
			            if (this.uploadForm.fileType == 38) {
			                this.formats = ['.avi', '.mp4', '.wmv', '.mov']
			                this.size = 3 * 1024
			            }
		},
		methods:{
			uploadFn(){
				let that = this
				let type = []
				let size = 2 * 1024 * 1024 * 1024 // 1 GB
				if([31,32,34].includes(this.uploadForm.fileType)){
					type = ['.doc','.docx','.pdf']
				}
				if([33].includes(this.uploadForm.fileType)){
					type = ['.doc','.docx',]
				}
				if(this.uploadForm.fileType == 38){
					type =['.avi','.mp4','.wmv','.mov']
					size = 3 * 1024 * 1024 * 1024
				}
				uni.chooseFile({
					// count: 100, //默认100
					// 这里需要更具多种文件判断不同的上传类型
					// extension:['.doc','.docx','.xls','.xlsx','.ppt','.pptx','pdf'],
					extension:type,
					maxSize:size,
					success: function (res) {
                        console.log('console',res)
                        if (res.tempFiles && res.tempFiles.length > 0 && res.tempFiles[0].size > size) {//1GB
                            that.$toast(`仅支持大小为${Number(size / 1024 / 1024 / 1024)}GB以内的文件`);
                            return;
                        }
                        let num = 0
                        let fileType = []
                        let hasType = []
                        res.tempFiles.forEach(item => {
                            fileType = item.name.split('.')
                            hasType = type.filter(item => item === '.' + fileType[fileType.length - 1])
                            if (hasType && hasType.length === 0) {
                                num++
                            }
                        })
                        if (num > 0) {
                            that.$toast('仅支持' + type.join(',') + '格式文件')
                            return true
                        }
						res.tempFilePaths.forEach(item => {
                            that.loading++
							uni.uploadFile({
								url: config.baseUrl + '/knowledgeFile/file/upload',
								header: {
									token: that.token,
								},
								filePath: item,
								name: 'files',
								formData: {
									fileType: that.uploadForm.fileType,
									profession: that.uploadForm.profession
								},
								success: (uploadFileRes) => {
                                    if(uploadFileRes.code == 1000){
                                        this.$message.warning(uploadFileRes.msg)
                                        that.loading--
                                        return
                                    }
                                    that.loading--
									let tempData = JSON.parse(uploadFileRes.data)
									console.log(tempData.data[0], 'success');
                                    let newArr = that.processList.filter(item => item.fileName === tempData.data[0].fileName)
                                    if (newArr && newArr.length > 0) {
                                        that.$toast(tempData.data[0].fileName + '文件名重复，不可上传！')
                                        return true
                                    }
									that.processList.push(tempData.data[0])
								},
								fail: (uploadFileError) => {
								// 处理上传失败的错误
                                    that.loading--
								}
							})
						})
					}
				})
			},
            
            getImage(type) {
                let src = "";
                switch (type) {
                    case "xlsx":
                    case "xls":
                        src = "file_excel.svg";
                        break;
                    case "docx":
                    case "doc":
                        src = "file_word.svg";
                        break;
                    case "mp4":
                        src = "file_video.svg";
                        break;
                    case "ppt":
                    case "pptx":
                        src = "file_ppt.svg";
                        break;
                    case "pdf":
                        src = "file_pdf.svg";
                        break;
                    default:
                        src = 'file_other.svg'
                }
                return src
            },
            moreFn(item, index) {
                this.operationIndex = index
                setTimeout(() => {
                    this.operationIndex = -1
                }, this.timeNumber)
            },
            
            handleFocus(index) {
                setTimeout(() => {
                    this.operationIndex = index
                }, 50)
            },
            handleBlur(index) {
                setTimeout(() => {
                    this.operationIndex = -1
                }, 50)
            },
            getFiles(list) {
                console.log('父级附件列表', list)
                this.processList = this.processList.concat(list)
            },
            handleProgress(item, childId) {
                console.log("🚀 ~ item--=-=:", item)
                const data = JSON.parse(item)
                this.progress = data.progress
                this.currentFileName = data.fileName || ''
            },
            importFn() {
                if(this.processList.length == 0){
                    this.$toast("请上传文件")
                    return
                }
                let uploadStatus = this.processList.filter(item => item.uploadStatus === 1)
                if (uploadStatus && uploadStatus.length > 0) {
                    this.$toast('列表有重名文件，请删除后重试！')
                    return true
                }
                this.$request({
                    url: '/knowledgeFile/file/save',
                    method: 'post',
                    data: this.processList
				}).then(({ data }) => {
				    uni.showToast({
				        title: '导入成功！',
				        icon: 'success',
				        duration: 1000
				    })
					// uni.$emit('returnData', this.processList)
					uni.$emit('returnData')
					setTimeout(function() {
						uni.navigateBack()
					}, 1000)
				});
			},
			del(item, index) {
				let that = this
                that.operationIndex = -1
				uni.showModal({
				    title: '提示',
				    content: '确认删除该文件吗？',
				    success: function (res) {
				        if (res.confirm) {
							that.processList.splice(index, 1);
							/* this.$request({
								url: "/knowledgeFile/file/delete",
								method: "post",
								data: this.processList,
							}).then(({ data }) => {
								uni.showToast({
									title: '删除成功！',
									icon: 'success',
									duration: 2000
								});
							}); */
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
            handleLoading(isLoading) {
                this.isLoading = isLoading;
                // return isLoading ? this.loading++ : this.loading--;
            },
		}
	}
</script>

<style lang="scss">
 uni-page-body {
    height: 100%;
}
</style>
<style lang="scss" scoped>
	.screen_lists {
		width: 100%;
        height: 100%;
        background: #FFFFFF;
        padding: 0 50rpx;
        .screen_list{
            height: calc(100% - 300rpx);
            overflow-y: auto;
            font-family: 思源黑体;
            font-size: 30rpx;
        }
		.screen_list_item {
			display: grid;
            grid-template-columns: 44rpx 1fr 40rpx;
            grid-column-gap: 20rpx;
            align-items: center;
			height: 140rpx;
            padding: 32rpx 0;
            
            &+.screen_list_item{
                border-top: 1px solid #E4E4E4;
            }
            .screen_name_info{
    
                width: 100%;
                display: flex;
                flex-direction: column;
    
                .name {
                    font-weight: 500;
                    width: 100%;
                    line-height: 1;
                    margin-bottom: 20rpx;
                    font-family: 思源黑体;
                    font-size: 30rpx;
                    color: #1C2126;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
    
                .info {
                    font-family: 思源黑体;
                    font-size: 24rpx;
                    color: #4C5A67;
                    text+text {
                        margin-left: 20rpx;
                    }
                    .again{
                        font-family: 思源黑体;
                        font-size: 24rpx;
                        line-height: 20px;
                        color: #F53F3F;
                        width: 96rpx;
                    }
                }
            }
            .screen_again_more{
                .uni_icons{
                    &:hover, &:active{
                        color: #0084FF !important;
                    }
                }
    
                .operation {
                    width: 172rpx !important;
                    position: absolute;
                    margin-right: 20rpx;
                    right: -10rpx;
                    z-index: 999999;
                    background: #FFFFFF;
                    box-shadow: 0 2rpx 8rpx 0px rgba(170, 190, 206, 0.4);
        
                    .operation_btn {
                        width: 172rpx;
                        height: 60rpx;
                        line-height: 60rpx;
                        text-align: center;
                        font-family: 思源黑体;
                        font-size: 30rpx;
                        color: #1C2126;
                        &:hover, &:active{
                            color: #0084FF;
                            background: #F4F6F9;
                        }
                    }
                }
            }
			image {
				width: 44rpx;
				height: 40rpx;
                align-self: start;
			}
		}
		
	}
	.uploadBtn{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 68rpx;
        border-radius: 16px;
        color: #272636;
        background: #FFFFFF;
        border-color: #DCDEE1;
        box-shadow: 0 -10rpx 20rpx 0 rgba(0, 0, 0, 0.05);
    }
    
    /* 蒙版进度条样式 */
    .progress-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .progress-content {
        background-color: white;
        border-radius: 20rpx;
        padding: 60rpx 40rpx;
        width: 600rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
    }
    
    .circle-progress-container {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 40rpx;
    }
    
    .circle-progress {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: conic-gradient(#007AFF var(--progress-deg), #E8F0FE var(--progress-deg));
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background 0.3s ease;
    }
    
    .progress-inner {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
    
    .loading-icon {
        animation: spin 1s linear infinite;
    }
    
    .progress-text {
        font-size: 32rpx;
        font-weight: 600;
        color: #007AFF;
        margin-top: 10rpx;
    }
    
    .upload-info {
        text-align: center;
    }
    
    .upload-text {
        font-size: 34rpx;
        font-weight: 500;
        color: #1C2126;
        margin-bottom: 20rpx;
    }
    
    .file-name {
        font-size: 28rpx;
        color: #4C5A67;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    /* 蒙版进度条样式 */
    .progress-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .progress-content {
        background-color: white;
        border-radius: 20rpx;
        padding: 60rpx 40rpx;
        width: 600rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
    }
    
    .circle-progress-container {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 40rpx;
    }
    
    .circle-progress {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: conic-gradient(#007AFF var(--progress-deg), #E8F0FE var(--progress-deg));
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background 0.3s ease;
    }
    
    .progress-inner {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
    
    .loading-icon {
        animation: spin 1s linear infinite;
    }
    
    .progress-text {
        font-size: 32rpx;
        font-weight: 600;
        color: #007AFF;
        margin-top: 10rpx;
    }
    
    .upload-info {
        text-align: center;
    }
    
    .upload-text {
        font-size: 34rpx;
        font-weight: 500;
        color: #1C2126;
        margin-bottom: 20rpx;
    }
    
    .file-name {
        font-size: 28rpx;
        color: #4C5A67;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
			
    .bottom{
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        margin: 60rpx 0 48rpx;
        background: #FFFFFF;
        .u-button:nth-child(1){
            flex: 1;
            border-radius: 16rpx;
            font-family: Poppins;
            font-size: 32rpx;
            font-weight: 500;
            color: #4C5A67;
        }
        .u-button:nth-child(2){
            margin-left: 30rpx;
            width: 222rpx;
            min-width: 222rpx;
            border-radius: 16rpx;
            font-family: Poppins;
            font-size: 32rpx;
            font-weight: 600;
            color: #FFFFFF;
        }
    }
</style>